<template>
  <div class="home">
    <H3 style="font-weight: bold;color: #2d2d2d;margin-left: 55px;margin-bottom:12px;">版号基本信息</H3>
    <div class="home-top">
      <!--顶部左边-->
      <div class="ht-one">
        <table :data="tableData" border class="data_table" style="border:0px solid #ffffff;margin-left: 1px;margin-top: 1px;">
          <tr width="380" align="center"  height="40px">
            <td width="140px" rowspan="5" style="background-color: #ffffff;">
              <img :src="categoryImg" alt="" width="140px" height="196px">
            </td>
            <td width="100px" align="right" style="background-color: #f2f2f2;padding-right: 20px;">版号名称</td>
            <td width="120px" align="left" style="padding-left: 15px;">{{categoryName}}</td>
          </tr>
          <tr width="200px" align="center"  height="40px">
            <td align="right" style="background-color: #f2f2f2;padding-right: 20px;">版号排序</td>
            <td align="left" style="padding-left: 15px;">{{categoryXuhao}}</td>
          </tr>
          <tr width="200px" align="center"  height="40px">
            <td align="right" style="background-color: #f2f2f2;padding-right: 20px;">性别</td>
            <td align="left" style="padding-left: 15px;">{{categorySex}}</td>
          </tr>
          <tr width="200px" align="center"  height="40px">
            <td align="right" style="background-color: #f2f2f2;padding-right: 20px;">版号编号</td>
            <td align="left" style="padding-left: 15px;">{{categoryCode}}</td>
          </tr>
          <tr width="200px" align="center"  height="40px">
            <td align="right" style="background-color: #f2f2f2;padding-right: 20px;">版号说明</td>
            <td align="left" style="padding-left: 15px;">{{categoryDetail}}</td>
          </tr>
        </table>
      </div>

      <!--顶部右边-->
      <div class="ht-there">
        <table :data="tableData" border class="data_table" style="border:0px solid #fff;margin-left: 1px;margin-top: 1px;">
          <tr width="380" align="center"  height="40px">
            <td width="100px" align="right" style="background-color: #f2f2f2;padding-right: 20px;">上级品类</td>
            <td width="150px" align="left" style="padding-left: 15px;">{{topname}}</td>

            <td width="120px" align="right" style="background-color: #f2f2f2;padding-right: 10px;">最新启用时间</td>
            <td width="180px" align="left" style="padding-left: 15px;">{{newtime}}</td>
          </tr>

          <tr width="200px" align="center"  height="40px">
            <td align="right" style="background-color: #f2f2f2;padding-right: 20px;">品类编号</td>
            <td align="left" style="padding-left: 10px;">{{topcode}}</td>
            <td width="120px" align="right" style="background-color: #f2f2f2;padding-right: 10px;">参数同步时间</td>
            <td width="180px" align="left" style="padding-left: 15px;">{{qiyong_time}}</td>
          </tr>
          <tr width="400px" align="center"  height="40px">
            <td align="right" style="background-color: #f2f2f2;padding-right: 20px;">备注</td>
            <td align="left" style="padding-left: 15px;" colspan="3">{{qiyong_remark}}</td>
          </tr>

          <tr width="200px" align="center"  height="40px" v-show="is_cunzai==1">
            <td align="center" style="background-color: #f2f2f2;padding-right: 20px;" colspan="4">
              <a-menu-item style="align-content: center;margin-left: 170px">
                <a-popconfirm title="确定进行云同步数据吗?" @confirm="() => synchronous_data()" :loading="confirmLoading2">
<!--                  <a style="font-size: 14px;color: #d29328;">同步品类参数</a>-->
                  <a-button :loading="confirmLoading2" style="color: #F9D532;width: 120px;height: 30px;background: #333333;border-style: none;float: left;margin-right: 16px;margin-left: 6px;margin-top: 10px;font-size: 10px">同步品类参数</a-button>
                </a-popconfirm>
              </a-menu-item>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!--        @click="$router.push(item.link)"-->
    <ul class="home-main">
      <li
        class="hm-item"
        v-for="item in appList"
        :key="item.sign"
        @click="$router.push({path:item.link,query:{category_id:categoryId}})">
        <img
          :src="item.img"
          class="hmi-img"
          alt=""
        >
        <img
          :src="item.imgHover"
          class="hmi-img-hover"
          alt=""
        >
        <h3 class="hmi-txt1">{{item.txt1}}</h3>
<!--        <h5 class="hmi-txt2">{{item.txt2}}</h5>-->
        <p class="hmi-txt">{{item.txt}}</p>
      </li>
    </ul>

    <div>
      <H3 style="font-weight: bold;color: #2d2d2d;margin-left: 55px;margin-bottom:12px;">启用记录</H3>
    </div>
    <div style="padding-left: 36px;width: 100%;overflow: hidden" v-for="(datalist,i) in qiyongRecrod">
      <p style="font-size: 14px;color: #2d2d2d;padding-left: 20px;float: left">{{datalist.createTime}}</p>
      <span style="font-size: 14px;color: #2d2d2d;float: left;margin-top: 7px;">{{datalist.remark}}</span>
    </div>
<!--    <div style="padding-left: 36px;width: 100%;overflow: hidden">-->
<!--      <p style="font-size: 14px;color: #2d2d2d;padding-left: 20px;float: left">2018-20-19 15:36:36</p>-->
<!--      <span style="font-size: 14px;color: #2d2d2d;float: left;margin-top: 7px;">备注信息：记录卡进店率卡迪拉克来看</span>-->
<!--    </div>-->

    <div style="padding-bottom:20px;margin-bottom: 20px;margin-top: 20px;">
<!--      <el-button type="primary" @click="onqiyong">立即创建</el-button>-->
      <a-button @click="onqiyong" :loading="confirmLoading" style="color: #F9D532;width: 110px;height: 40px;background: #333333;border-style: none;float: left;margin-right: 16px;margin-left: 46px;">立即启用</a-button>
<!--      <a-button @click="onqiyong" style="color: #F9D532;width: 110px;height: 40px;background: #de2d67;border-style: none;float: left;margin-right: 16px;margin-left: 6px;">还原</a-button>-->
      <a-button @click="save_caogao" style="color: #F9D532;width: 110px;height: 40px;background: #333333;border-style: none;float: left;margin-right: 16px;margin-left: 6px;">保存草稿件</a-button>
    </div>
  </div>


</template>

<script>
  import "../../assets/img/home/h-1.png";
  // import { httpAction, postAction, getAction } from '@/api/manage'
  import { httpAction, postAction, getAction } from '@/api/manage'
  export default {
    data() {
      return {
        is_cunzai:0,
        is_click:'0',
        confirmLoading:false,
        confirmLoading2:false,
        categoryName:'',
        categoryCode:'',
        categoryXuhao:'',
        categorySex:'',
        categoryDetail:'',
        categoryImg:'',
        categoryId:'',
        topId:'',//上级id
        topname:'',//上级名
        topcode:'',//上级编号
        newtime:'',//最新更新时间
        qiyong_time:'',//最新启用时间
        qiyong_remark:'',//备注

        qiyongRecrod:[],//启用记录
        url: {
          query_detail:"/admin/testplate/query_PlateDetailById",//新的查询性情
          count_data:"/admin/testplate/count_data_banhaoId",
          // qiyong_pinglei:"/admin/formalplate/right_enable_caogao",//启用版号
          qiyong_pinglei:"/again/Enabled/parameter/enable_plate_draft",//新的启用版号
          qiyong_jllu:"/admin/formal/parameter/query_qiyongRecrod",//启用记录
          query_qiyongJjlu1:"/admin/testplate/query_qiyongRecord_categotyId",//查询上级品类的记录
          // tongbu_data:"/admin/testplate/post_synchronous_data",//同步数据
          tongbu_data:"/again/Enabled/parameter/synchronization_parameter",//同步数据
        },
        appList: [
          {
            sign: "applist0001",
            txt1:"定制选项",
            txt: "0",
            txt2:'当前定制选项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/dingzhi",
          },

          {
            sign: "applist0002",
            txt1:"互斥项",
            txt: "0",
            txt2:'当前互斥项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/huchi",
          },
          {
            sign: "applist0003",
            txt1:"绣字工艺",
            txt: "0",
            txt2:'当前绣字工艺项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/xiuzigongyi",
          },
          {
            sign: "applist0004",
            txt1:"撞色工艺",
            txt: "0",
            txt2:'当前撞色工艺项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/zhuangse",
          },
          {
            sign: "applist0005",
            txt1:"净体尺寸",
            txt: "0",
            txt2:'当前净体尺寸项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/bodysize1",
          },

          {
            sign: "applist006",
            txt1:"成衣尺寸",
            txt: "0",
            txt2:'当前成衣尺寸项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/bodysize2",
          },
          {
            sign: "applist007",
            txt1:"返修参数",
            txt: "0",
            txt2:'当前返修参数项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/fanxiu",
          },
          {
            sign: "applist008",
            txt1:"工艺类型",
            txt: "0",
            txt2:'当前工艺类型项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/gongyitype",
          },
          {
            sign: "applist009",
            txt1:"配置辅料",
            txt: "0",
            txt2:'当前辅料项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/setfuliao",
          },
          {
            sign: "applist0010",
            txt1:"配置标准码",
            txt: "0",
            txt2:'当前标准码项',
            img: require("../../assets/img/home/h-5.png"),
            imgHover: require("../../assets/img/home/h-6.png"),
            link: "/plate/standardcode",
          },
        ],
      };
    },
    created(){
      this.show_categorydetail();//查询品类信息
      this.show_count_data();//统计数据
      this.show_qiyong_datalist();//启用记录
      // this.show_qiyongjilu2();
    },
    methods:{
      show_categorydetail() {
        let params = {category_id:this.$route.query.id};
        getAction(this.url.query_detail,params).then((res)=>{
          if(res.success){
            this.categorydetail = res.result;
            this.categoryId = this.categorydetail.id;
            this.categoryName=this.categorydetail.categoryName;
            this.categoryCode=this.categorydetail.categoryCode;
            this.categoryXuhao=this.categorydetail.numbers;
            this.categoryDetail=this.categorydetail.remark;
            this.categoryImg=this.categorydetail.img;
            this.topId = this.categorydetail.topid;
            if(this.categorydetail.categorySex=='0'){
              this.categorySex='全部';
            }else if(this.categorydetail.categorySex=='1'){
              this.categorySex='男装';
            }else {
              this.categorySex='女装';
            }
            this.topname=this.categorydetail.topName;
            this.topcode = this.categorydetail.topCode;
            this.show_qiyongjilu1(this.categorydetail.topid);
          }else {
            this.$message.error("查询失败");
          }
        });
      },

      show_qiyongjilu1(id) {//查询启用记录--品类
        let params = {category_id:id,type:"0"};
        getAction(this.url.query_qiyongJjlu1,params).then((res)=>{
          if(res.success){
            if(res.result.createTime==null || "".endsWith(res.result.createTime)){
              this.newtime = "暂无更新记录";
            }else {
              this.newtime = res.result.createTime;
            }
            let params = {category_id:this.$route.query.id,type:"1"};
            getAction(this.url.query_qiyongJjlu1,params).then((res)=>{
              if(res.success){
                this.qiyong_time = res.result.createTime;
                let dates1 = new Date(this.qiyong_time).getTime();//启用时间
                let dates2 = new Date(this.newtime).getTime();//更新时间
                if (dates1 < dates2) {
                  this.is_cunzai=1;
                  this.qiyong_remark = "上级品类有新的更新啦！";
                } else {
                  this.is_cunzai=0;
                  this.qiyong_remark = res.result.remark;
                }
                // alert(dates1+"==="+dates2)
              }else {
                this.$message.error("查询失败");
              }
            });

          }else {
            this.$message.error("查询失败");
          }
        });
      },
      show_qiyongjilu2() {//查询启用记录2--版号
        let params = {category_id:this.$route.query.id,type:"1"};
        getAction(this.url.query_qiyongJjlu1,params).then((res)=>{
          if(res.success){
            this.qiyong_time = res.result.createTime;
            this.qiyong_remark = res.result.remark;
            let dates1 = new Date(this.qiyong_time).getTime();//启用时间
            let dates2 = new Date(this.newtime).getTime();//更新时间
            if (dates1 < dates2) {
              this.is_cunzai=1;
            } else {
              this.is_cunzai=0;
            }
          }else {
            this.$message.error("查询失败");
          }
        });
      },

      show_count_data(){//统计数据
        let params = {category_id:this.$route.query.id};
        getAction(this.url.count_data,params).then((res)=>{
          if(res.success){
            this.appList[0].txt=res.result.dingzhiNum;
            this.appList[1].txt=res.result.huchiNum;
            this.appList[2].txt=res.result.xiuziNum;
            this.appList[3].txt=res.result.zhuangseNum;
            this.appList[4].txt=res.result.jingtiNum;
            this.appList[5].txt=res.result.chengNum;
            this.appList[6].txt=res.result.fanxiuNum;
            this.appList[7].txt=res.result.gongyiNum;
            this.appList[8].txt=res.result.fuliao;
            this.appList[9].txt=res.result.standardcode;
            if(this.appList[1].txt1=='互斥项'){
              this.is_click='0';
            }else {
              this.is_click='1';
            }
          }else {
            this.$message.error("查询失败");
          }
        });
      },
      onqiyong(){//启用草稿件
        this.$confirm('确定要立即启用该草稿件吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.confirmLoading = true;
          this.$message.success("正在启用中，请主人稍作等待...");
          let params = {category_id:this.$route.query.id};
          postAction(this.url.qiyong_pinglei,params).then((res)=>{
            if(res.success){
              this.$message.success("启用成功");
              this.confirmLoading = false;
              this.qiyongRecrod = [];
              this.show_qiyong_datalist();//启用记录
            }else {
              this.$message.error(res.message);
              this.confirmLoading = false;
            }
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消'
          // });
          this.confirmLoading = false;
        });
      },

      synchronous_data(){//同步数据
        // this.$confirm('确定要立即云同步数据吗?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
          this.confirmLoading2 = true;
          this.$message.success("正在同步数据中，请主人稍作等待...");
          let params = {category_id:this.$route.query.id,top_id:this.topId};
          postAction(this.url.tongbu_data,params).then((res)=>{
            if(res.success){
              this.$message.success(res.message);
              this.confirmLoading2 = false;
              this.qiyongRecrod = [];
              this.show_qiyong_datalist();//启用记录
              this.show_count_data();
              this.show_categorydetail();
            }else {
              this.$message.error(res.message);
              this.confirmLoading2 = false;
            }
          });
        // }).catch(() => {
        //   this.confirmLoading = false;
        // });
      },

      show_qiyong_datalist(){//启用记录
        let params = {category_id:this.$route.query.id};
        getAction(this.url.qiyong_jllu,params).then((res)=>{
          if(res.success){
             this.qiyongRecrod = res.result;
          }else {
            this.qiyongRecrod = [];
          }
        });
      },
      save_caogao(){//保存草稿件
        this.$message.success("保存成功！");
      },
    },
  };
</script>

<style scoped>
  .home {
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 20px;
    padding-right: 5px;
    padding-bottom: 20px;
    background-color: #ffffff;
  }
  .home-top {
    width: 100%;
    height: 204px;
    background: #ffffff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .ht-one {
    width: 48%;
    height: 204px;
    display: flex;
    float: left;
    margin-left: 54px;
  }
  .ht-there {
    width: 52%;
    background-color: #f2f2f2;
    height: 100%;
    float: right;
    margin-right: 30px;
    margin-left: 20px;
  }
  .hto-left {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  .hto-right {
    margin-left: 10px;
  }
  p:nth-child(1) {
    font-size: 20px;
    font-weight: 900;
    color: #545454;
    line-height: 36px;
  }
  p:nth-child(2) {
    font-size: 14px;
    color: #545454;
    line-height: 20px;
  }
  .ht-two {
    display: flex;
    align-items: center;
  }
  p {
    font-size: 16px;
    font-weight: 500;
    color: #545454;
  }
  p:nth-child(1) {
  }
  p:nth-child(2) {
    width: 2px;
    height: 102px;
    background: #dadada;
    margin: 0 30px;
  }
  p:nth-child(3) {
  }

  .home-main {
    display: flex;
    flex-wrap: wrap;
  }
  .hm-item {
    width: 240px;
    height: 240px;
    background: #f2f2f2;
    border-radius: 3px;
    margin-top: 20px;
    margin-right: 0px;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 500ms;
  }
  .hmi-img {
    width: 75px;
  }
  .hmi-img-hover {
    width: 75px;
    display: none;
  }
  .hmi-txt {
    font-size: 24px;
    color: #151515;
    margin-top: 15px;
    font-weight: bold;
  }
  .hmi-txt:hover {
    font-size: 24px;
    color: #f9d531;
    font-weight: bold;
    margin-top: 15px;
  }
  .hmi-txt1 {
    font-size: 18px;
    color: #151515;
    font-weight: 500;
    margin-top: 5px;
    font-weight: bold;
  }
  .hmi-txt1:hover {
    font-size: 18px;
    color: #151515;
    font-weight: 500;
    margin-top: 5px;
    color: #f9d531;
    font-weight: bold;
  }
  .hmi-txt2 {
    font-size: 10px;
    color: #c7c5c5;
    margin-top: -10px;
    font-weight: bolder;
  }
  .hmi-txt2:hover {
    font-size: 10px;
    color: #c7c5c5;
    margin-top: -10px;
    font-weight: bolder;
    color: #f9d531;
  }

  .hm-item:hover {
    box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.19);
    cursor: pointer;
    transition: all 500ms;
    background: #7d7b7b;
    color: #f9d531;
  }
  .hmi-img {
    display: none;
  }
  .hmi-img-hover {
    display: block;
  }
  .hm-item:nth-child(5n) {
    margin-right: 0;
  }
  .mc-drawer {
    box-sizing: border-box;
    padding: 40px;
  }
  .mcd-top {
    display: flex;
    align-items: center;
  }
  span:nth-child(1) {
    display: block;
    width: 6px;
    height: 28px;
    background: #545454;
  }
  span:nth-child(2) {
    font-size: 18px;
    margin-left: 10px;
    font-weight: 600;
    color: #424242;
  }
  .mcd-main {
    margin-top: 50px;
  }
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  p:nth-child(1) {
    color: #232222;
    font-weight: 500;
    font-size: 12px;
  }
  p:nth-child(2) {
    color: #333333;
    font-weight: 500;
  }
  p:nth-child(3) {
    color: #232222;
    font-weight: 200;
  }
  .mcd-btn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background: #ffe56d;
    border-radius: 3px;
    color: #333;
    font-weight: 600;
    margin-top: 50px;
  }
</style>
